<template>
    <div class="compare-phone">
        <van-nav-bar left-arrow @click-left="$router.back(-1)" :fixed="true" :title="$t('m.ComparePhonePrice')"
                     style="color:#fff;">
        </van-nav-bar>
        <div style="margin-top:46px">
            <van-cell :title="$t('m.Phones')" class="orange"/>
            <van-list
                v-model="loading"
                :finished="finished"
                :loading-text="$t('m.Loading')"
                @load="getCompareData"
                v-show="true"
            >
                <div class="brand-outer-wraper" v-for="(item,index) in tableData" :key="index">
                    <div class="title-area">
                        <span class="brand-title">{{item.title}}</span>
                        <van-button size="small" class="button-modify"
                                    @click="goToDetail(item.valueId,item.title,item)">{{$t('m.Spec')}}
                        </van-button>
                    </div>
                    <div class="button-area">
                        <!--condition new对应字符串0 used对应字符串1-->
                        <span class="brand-new" v-if="item.newPrice">
                            <van-button size="small" class="button-modify"
                                        @click="goToList(item.valueId,'0',item.title)">{{$t('m.Buy')}}</van-button>
                            <span style="word-break: break-all;margin:6px;">{{$t('m.NewFrom')}} <span
                                style="color:rgb(255, 0, 51)">{{regexNum(item.newPrice)}} </span>LKS</span>

                        </span>
                        <span class="brand-new" v-if="item.oldPrice">
                            <van-button size="small" class="button-modify"
                                        @click="goToList(item.valueId,'1',item.title)">{{$t('m.Buy')}}</van-button>
                            <span style="word-break: break-all;margin:6px;">{{$t('m.OldFrom')}} <span
                                style="color:rgb(8, 83, 148)">{{regexNum(item.oldPrice)}} </span>LKS</span>
                        </span>
                    </div>
                </div>
            </van-list>
            <div v-if="finished" class="no-more">{{$t('m.Nomore')}}~</div>
        </div>
    </div>
</template>
<script>
    import {comparePrice} from "../../static/api/guc_api";

    export default {
        name: 'comparePhoneComparePrice',
        data() {
            return {
                loading: false,
                finished: false,
                tableData: [],
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                pageInfo: {
                    totalCount: 0,
                    totalPages: 0
                }
            }
        },
        methods: {
            //为了使详情页的数据显示的更快 避免在详情页通过发送请求来重新获取头部的model信息和控制buynew，buyused的显示，现在的做法是
            // 直接将这些信息从路由中传递过去
            goToDetail(id, title, item) {
                let buttonStautus = null
                let haveNew = item.newPrice
                let haveOld = item.oldPrice
                // 如果只有卖新的 状态为1 通过是否存在newprice，oldprice来判断是否存在新商品或旧商品
                if (haveNew && !haveOld) {
                    buttonStautus = 1
                }
                // 如果只有卖旧的 状态为2
                else if (!haveNew && haveOld) {
                    buttonStautus = 2
                }
                //如果都有 状态为3
                else if (haveNew && haveOld) {
                    buttonStautus = 3
                }
                //如果都没有 状态为4 理论上不存在这个可能
                else {
                    buttonStautus = 4
                }
                this.$router.push({
                    path: '/compare-phone/phone-detail',
                    query: {
                        propertyValueId: id,
                        modelBrand: title,
                        buttonStatus: buttonStautus
                    }
                })
            },
            getCompareData() {
                comparePrice(this.pageData)
                    .then(res => {
                        if (res.data.errorID == 0) {
                            let dataList = res.data.object.list || []
                            // // 刷新列表 or 加载更多
                            if (this.pageData.pageNum == 1) {
                                window.scrollTo(0, 0)
                                this.tableData = dataList
                                this.finished = false;
                            } else {
                                this.tableData = this.tableData.concat(dataList)
                            }
                            // // 分页信息配置
                            this.pageInfo.totalPages = res.data.object.pages
                            this.pageInfo.totalCount = res.data.object.total
                            this.pageData.pageNum = this.pageData.pageNum + 1
                            if (this.pageData.pageNum > this.pageInfo.totalPages) {
                                this.finished = true
                            }
                            this.loading = false;
                        } else {
                            this.$toast(res.data.message)
                            this.finished = true
                            this.loading = false;
                        }
                    }).catch((e) => {
                    this.$toast('No internet, please try again')
                    console.log(e)
                    this.finished = true
                    this.loading = false
                })
            },
            goToList(id, status, title) {
                //要跟在buylist页面往路由中添加filter参数的方法一样
                // 改需求了 不再跳到之前的列表页了 现在要新建一个phone专用的列表页 之前的代码暂时不删
                // let tempArr1 = []
                // tempArr1.push(id)
                // let tempArr2 = []
                // tempArr2.push(tempArr1)
                // let tempObj = {
                //     condition: status,
                //     sort: 'sortPrice asc',
                //     properties: tempArr2
                // }
                // this.$router.push({
                //     path: '/buy-list',
                //     query: {
                //         filter: JSON.stringify(tempObj),
                //         categoryId: 142
                //     }
                // })
                this.$router.push({
                    path: 'phone-list',
                    query: {
                        // categoryId: 142,
                        condition: status,
                        propertyValueId: id,
                        //直接把title传过去，要不然到新页面再发送请求获取title太慢
                        modelBrand: title
                    }
                })
            },
            //格式化价格的方法
            regexNum (v,len,split) {
                split = split || ',', len = Math.abs((+len) % 20 || 2)
                v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
                v = parseFloat(v) + ''
                return v.replace(/\d+/, function (v) {
                        let lit = v.length % 3 == 0
                        let index = lit ? v.length - 3 : -1
                        return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
                            return k + ((l == index && lit) ? '' : split)
                        }).split('').reverse().join('')
                    }
                )
            },
        },
        beforeRouteLeave(to, from, next) {
            if (to.path == '/compare-phone/phone-detail' || to.path == '/compare-phone/phone-list') {
                from.meta['needFresh'] = false;
            }
            else {
                from.meta['needFresh'] = true;
            }
            next()
        },
        activated() {  //此方法在页面缓存时会被调用，根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
            if (this.$route.meta['needFresh']) {  // 当前是否需要刷新
                Object.assign(this.$data, this.$options.data())  // 整个页面数据重置
                window.scroll(0, 0)
            }
        }
    }
</script>
<style>
    .compare-phone .van-nav-bar {
        background-color: #f90;
    }

    .compare-phone .van-nav-bar .van-icon {
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }
    .van-button__text {
        white-space: nowrap;
    }
</style>
<style scoped>
    .orange {
        color: #f90 !important;
    }

    .brand-outer-wraper {
        padding: 5px;
        border-bottom: solid 1px #e5e5e5;
    }

    .brand-outer-wraper .title-area {
        display: flex;
        justify-content: space-between;
    }

    .brand-outer-wraper .button-area {
        display: flex;
        flex-direction: column;
    }

    .brand-outer-wraper .button-area .brand-new {
        display: flex;
        align-items: flex-start;
    }

    .brand-outer-wraper .title-area .brand-title {
        font-weight: 600;
        padding: 5px;
        margin-left: 5px;
        line-height: 30px;
    }

    .brand-outer-wraper .button-modify {
        border: solid 1px #4e4e4e;
        margin: 5px;
        border-radius: 6px;
    }

    .van-button--small {
        font-size: 16px;
    }

    .no-more {
        border-top: 1px solid #F2F2F2;
        height: 50px;
        line-height: 50px;
        color: #909399;
        text-align: center;
    }
</style>
